<template>
  <div class="home-container">
    <ul class="demo-list">
      <li>
        <p>您好，欢迎使用思普云管理平台</p>
      </li>
      <li>
        <p>Icon使用示例：</p>
        <sc-icon name="icongongchengshi"></sc-icon>
      </li>
      <li>
        <p>当前语言：{{ $store.getters.language }} --- {{ $t('common.text') }}</p>
      </li>
      <li>
        <p>主题色示例：</p>
        <p>非element组件：</p>
        <p class="demo-text">文字颜色</p>
        <p>element组件：</p>
        <el-button type="primary">主题色按钮</el-button>
      </li>
      <li>
        <p>通用阴影示例：</p>
        <div class="demo-box sc-box-shadow"></div>
      </li>
      <li>
        <p>toast示例</p>
        <el-button
          type="primary"
          @click="toastFn"
        >toast提示</el-button>
      </li>
      <li>
        <p>msgFn示例</p>
        <el-button
          type="danger"
          @click="msgFn('错误提示')"
        >错误提示</el-button>
        <el-button
          type="success"
          @click="msgFn('成功提示', 'success')"
        >成功提示</el-button>
        <el-button
          type="warning"
          @click="msgFn('警告提示', 'warning')"
        >警告提示</el-button>
        <el-button @click="msgFn('信息提示', 'info')">信息提示</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    // toast提示
    toastFn() {
      // 204是后台返回的res中的message字段值
      let res = {
        data: {},
        message: '204',
        status: 200
      };
      this.$toast(res.message);
    },
    // msgFn提示
    msgFn(msg, type, duration) {
      this.$msgFn(msg, type, duration);
    }
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
  .demo-list {
    li {
      margin-bottom: 20px;

      p {
        margin-bottom: 10px;
      }

      .demo-text {
        color: var(--color-primary);
      }
      .demo-box {
        width: 100px;
        height: 60px;
      }
    }
  }
}
</style>
